<div id="languages">
</div>
<div id='widget-languages'>
    <div class="user_languages">
        <button id="add-language" class="glyphicon glyphicon-plus btn btn-info user_languages_button"></button>
        <label>Add another language</label>
    </div>
    <div class="user_languages">
        <button class="btn-primary" style="margin-top: 5px; width: 70px">Save</button>
        <button class="btn-default" style="margin: 5px 0px 0px 5px; width: 70px">Cancel</button>
    </div>
</div>

<div class="template" id="template-language">
    <div class="row language">
        <div class="col-md-6">
            <label class="user_languages">Language <abbr title="Required">*</abbr></label>
            <input type="text" placeholder="{ language }"/>
        </div>
        <div class="col-md-6">
            <label>Proficiency</label><br/>
            <select>
                <option value selected="selected">Proficiency..</option>
                <option value="1">Elementary proficiency</option>
                <option value="2">Limited working proficiency</option>
                <option value="3">Professional working proficiency</option>
                <option value="4">Full professional proficiency</option>
                <option value="5">Native or bilingual proficiency</option>
            </select>
            <span class="glyphicon glyphicon-remove remove-sign"></span>
        </div>
    </div>
    <script>
        $('.remove-sign').click(function () {
            console.log('OK');
        });
    </script>
</div>

<script src="<?php echo $this->basePath() ?>/js/widget/languages.js"></script>